<template>
    <div class="contain-edit">
        <div class="header">
           <p>联系客服</p>
       </div>
       <div class="main">
           <el-form :model="user" :rules="rules" ref="user" label-width="120px" class="">
                <el-form-item label="客服电话" prop="phoneContent" >
                    <el-input v-model="user.phoneContent"  placeholder="请输入客服电话"></el-input>
                </el-form-item>
                <el-form-item label="客服微信" prop="wxContent">
                    <el-input v-model="user.wxContent" placeholder="请输入客服微信"></el-input>
                </el-form-item>
                <el-form-item label="客服QQ" prop="qqContent">
                    <el-input v-model="user.qqContent" placeholder="请输入客服QQ"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"  @click="submitForm('user')">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
       

    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
export default {
    data() {
        return {
            id:'',
            user: {
                qqContent:'',
                phoneContent:'',
                wxContent:''
            },
            rules: {
                qqContent: [
                    { required: true, message: '请输入客服QQ', trigger: 'blur' }
                ],
                phoneContent: [
                    { required: true, message: '请输入客服电话', trigger: 'blur' }
                ],
                wxContent:[
                    { required: true, message: '请输入客服微信', trigger: 'blur' }
                ]
            },
        }
    },
    mounted() {
        this.getDetail()
    },
    methods: {
        getDetail(id){
            let url = CONSTANT.URL.SYSVAR.FINDPHONE;
            common.requestAjax(url,{},{},(res)=>{
                let info = res.data.bussData;
                this.user.phoneContent=info
            })
            let url1 = CONSTANT.URL.SYSVAR.FINDQQ;
            common.requestAjax(url1,{},{},(res)=>{
                let info = res.data.bussData;
                this.user.qqContent=info
            })
            let url2 = CONSTANT.URL.SYSVAR.FINDWX;
            common.requestAjax(url2,{},{},(res)=>{
                let info = res.data.bussData;
                this.user.wxContent=info
            })
        },
        submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    var url = CONSTANT.URL.SYSVAR.SAVEQQ;
                    common.requestAjax(url, {}, {content:this.user.qqContent}, res => {
                        if(res.status == 200) {
                            this.loading = false;
                        } else {
                            this.loading = false;
                        }
                    });
                    var url2 = CONSTANT.URL.SYSVAR.SETWX;
                    common.requestAjax(url2, {}, {content:this.user.wxContent}, res => {
                        if(res.status == 200) {
                            this.loading = false;
                        } else {
                            this.loading = false;
                        }
                    });
                    var url1 = CONSTANT.URL.SYSVAR.SAVEPHONE;
                    common.requestAjax(url1, {}, {content:this.user.phoneContent}, res => {
                        if(res.status == 200) {
                            this.$message({
                                type: 'success',
                                message: '保存成功!'
                            });
                            this.loading = false;
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                            this.loading = false;
                        }
                    });
                } else {
                    return false;
                }
            });
        },
    },
    
}
</script>

<style lang="scss" scoped >

    .el-form-item__content{
        margin-left: 0;
    }
    .avatar-uploader {
        border-radius: 6px;
        box-sizing: border-box;
        vertical-align: top;
        .el-upload {
            cursor: pointer;
            position: relative;
            overflow: hidden;
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
                border: 1px dashed #d9d9d9 !important;
                border-radius: 6px;
                margin-left: 6px;
            }
            .avatar {
                width: 178px;
                height: 178px;
                display: block;
            }
        }
        .el-upload:hover {
            border-color: #20a0ff;
        }        
    }   
</style>